<script setup>
import { ref, createVNode } from 'vue'
import { DeleteFilled, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'

const todo = ref('')
const todoList = ref([
	{ id: 1, content: '吃饭' },
	{ id: 2, content: '睡觉' },
	{ id: 3, content: '打豆豆' },
])

const addTodo = () => {
	if (!todo.value) return
	todoList.value.push({ id: todoList.value.length + 1, content: todo.value })
	todo.value = ''
}

const delById = id => {
	Modal.confirm({
		title: '消息提示',
		icon: createVNode(ExclamationCircleOutlined),
		content: '你确定要删除吗？',
		onOk() {
			todoList.value = todoList.value.filter(item => item.id !== id)
		},
		onCancel() {},
	})
}
</script>

<template>
	<a-flex justify="center" align="center" style="height: 100vh">
		<div class="todo">
			<h1 style="text-align: center">TodoList待办事项</h1>
			<a-input-search class="input" v-model:value="todo" placeholder="请输入待办事项" enter-button="添加" size="large" @search="addTodo" />
			<a-space direction="vertical">
				<a-card class="todo-card" :title="item.content" v-for="item in todoList" :key="item.id">
					<template #extra>
						<a href="#" @click="delById(item.id)"><DeleteFilled style="font-size: 20px; color: #cc0000" /></a>
					</template>
				</a-card>
			</a-space>
		</div>
	</a-flex>
</template>

<style scoped>
.input {
	margin-bottom: 10px;
}
.todo,
.todo-card {
	width: 800px;
}
</style>
